<template>
  <div>
    <span >{{ unmatch ? value : values }}</span>
  </div>
</template>

<script>
export default {
  name: "ListValueMapper",
  props: {
    // 对象列表
    dataList: {
      type: Array,
      required: true
    },
    // 要匹配的值
    value: {
      type: [String, Number],
      required: true
    },
    // 对象中哪个字段与value进行匹配
    mapperField: {
      type: String,
      default: "id"
    },
    // 要显示匹配到的字段
    showField: {
      type: String,
      default: "name"
    }
  },
  computed: {
    values() {
      if (this.value === null || typeof this.value === 'undefined' || this.value === '') return '';
      return this.dataList.find(item => item[this.mapperField] === this.value)[this.showField];
    },
    unmatch() {
      return !this.dataList.some(item => item[this.mapperField] === this.value);
    },
  }
}
</script>
<style scoped>
</style>
